<template>
  <el-row :gutter="20" style="height: 100%;">
    <el-col :span="5">
      <div class="grid-content ep-bg-purple">
        <img  src="../../public/logo.png" alt="LOGO" style="width: 60px;height: 60px">
      </div>
    </el-col>
    <el-col :span="5">
      <div class="grid-content ep-bg-purple">
      </div>
    </el-col>
    <el-col :span="10">
      <div class="grid-content ep-bg-purple"/>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <el-col :span="15">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar :size="50" :src="circleUrl"/>
            </div>
          </div>
        </el-col>
      </div>
    </el-col>
    <el-col :span="2">
      <div class="grid-content ep-bg-purple">
        <el-badge is-dot class="item">
          <el-icon size="24">
            <Message/>
          </el-icon>
        </el-badge>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Message
} from '@element-plus/icons-vue'
import {reactive, toRefs} from 'vue'

const state = reactive({
  circleUrl:
      'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  squareUrl:
      'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  sizeList: ['small', '', 'large'] as const,
})

const {circleUrl, squareUrl, sizeList} = toRefs(state)
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
